WordPress Theme Deconstructed

Last week we touched on the basic components of a typical WordPress theme. Below is a visual example of how the layout looks like.

The components are as follows:

The Header (header.php)

The header is the structure that traditionally sits at the top of a web page. It contains the title of the website. It may also be referred to as the masthead, head, title, and banner. In all WordPress Themes, the header is found within the header.php template file.

Most themes have a header image that displays at the top of the page. This image is generated by a graphic defined either in the CSS value for the property that represents the header area or through the use of a custom header feature in WordPress. In themes that don’t have the custom header image feature, you can easily define a background image for the header image using CSS. (source: CSS for Dummies)

Menu (navigation) – usually found within or above the header

There are two ways to display a nav menu. One is by calling wp_nav_menu() within a theme template file. The other is by using the Navigation Menu widget. Most themes will call a menu from their header.php template, but menus can be placed anywhere. (source: Justin Tadlock)

The Sidebar (sidebar.php)

In general, the WordPress sidebar features titles of the various sections within a list, with the section items in a nested list below the title.
According to the WordPress Codex and in terms of design,
a sidebar is:
“… a narrow vertical column often jam-packed with lots of information about a website. Found on most WordPress sites, the sidebar is usually placed on the right or left-hand side of the web page, though in some cases, a site will feature two sidebars, one on each side of the main content where your posts are found.”

(You can also check out our previous article “Adding Sidebars to WordPress” to read more about sidebars.)

The Content Column (index.php)

The content container in WordPress plays the most important role. It holds the WordPress Loop which dictates the generation of content on the page depending upon the request by the user.

Content consists of text, images, or other information shared in posts. This is separate from the structural design of a web site, which provides a framework into which the content is inserted, and the presentation of a site, which involves graphic design.

The Footer (footer.php)

The footer is found within the footer.php template file. Footers are more than just a place to put copyright information. The footer in a web design is the bottom of the page. It indicates the end of the page. The footer includes navigational links to move the reader into your blog’s content, but it does so much more. It’s the last thing some visitors see after they finish reading your blog post and comments and should encourage people to stay a little longer on your site. (Source: lorelle.wordpress.com).

More next week!

Content Auditing – Is Your Content Up To Par?

“High quality content”, “Content is king.” – we often hear these phrases and although we know that content matters a lot, especially to Google, how many of us pay particular attention to what we post online? If you’ve been publishing large volumes of content on your website for how many years, have you ever taken the time to assess the quality of the content you have published? Have you ever conducted a content inventory, or better yet, a content audit on everything that appears on your website? Do you think managing your content will impact your traffic and conversion efforts or is its effect purely cosmetic?

A content inventory is the process and the result of cataloging the entire contents of a website. An allied practice—a content audit—is the process of evaluating that content.(source: Wikipedia)

WHY: Reasons for Conducting Content Audit

There are many reasons why you should consider conducting a content audit on your website especially for legacy content. You could use the collected data to evaluate specific functions and features of your website and its contents and optimize it to its fullest potential. Here are some reasons for conducting a content audit on your website(s):

  • Review your site’s architecture, structure, and navigational systems to make it more efficient and user friendly
  • Redesign, reconstruct, or renovate your website to make it more current or more responsive to the demographics of your current users. Consider the mobile market.
  • Migrate content to-from another site(s), from static pages to content management system (CMS)
  • Manage content quality, the amount of content, relevance, its layout presentation and design
  • Identify orphaned pages, content bloat, redundant pages that do not meet Google’s algorithm standards
  • Gather and analyze statistics as to user behaviour and interactivity on your website
  • Determine and identify popular and unpopular pages that get the most or the least visits – recognize effective content
  • Identify keywords and maximize organic search terms that drive traffic to your website

“Content audits are critical to understanding and evaluating the performance of your content against business goals, user needs, editorial standards, and performance factors such as search engine optimization and content use or web analytics. They bring value to your website project and on-going maintenance tasks by allowing you to carefully catalog and analyze your content structures, patterns, and consistency. Content audits tailored to your organization’?s content goals will reveal the highest quantity of specific opportunities for content improvement”.(source: content-insight.com)

HOW: Content Audit Strategy

Conducting a full-blown Content Audit especially on content heavy websites should be strategic and well-planned because it can be tedious and overwhelming. Strategy is key. Tactics can be modified and adapted. Some companies even choose to “throw out content” and start fresh. You can choose to conduct your content audit according to your needs and specifications in several ways:

  • Full Content Audit – Complete and comprehensive list of every content including all pages and all assets (downloadable or attached files etc.)
  • Partial Content Audit – Top hierarchy and subcategories or subset list
  • Content Sampling – Examine representative samples of content

WHO: Content Auditors:

  • Website designers and managers
  • Information architects and taxonomists
  • Content managers and developers
  • Content strategists and marketers
  • SEO managers

WHAT: Important Content Audit Items

  • Identify and document content volume and types
  • Identify and document the current content structure
  • Assess whether the content is being used
  • Document inconsistent content presentation

TO DO: Simple Content Audit Action Plan Sample

Conduct a Content Inventory

Create a content inventory spreadsheet and catalog. It may or may not include the following items based on your specs or based on the order of the most significant parts of your website:

  • ID, numbering or index
  • Page Title
  • Page Name
  • Page Type (homepage, navigation, ecommerce, blog, etc.)
  • URL
  • Level in the site (hierarchy)
  • Content type (multimedia, image, video, doc, pdf, HTML)
  • Owner/maintainer/author (content rights)
  • Comments
  • Character count or content size
  • Topics, tags, category, keywords, meta data
  • Date created
  • Last updated
  • Related files
  • Broken links (linking practices)
  • Duplicate content
  • Short Description or Notes
  • Alt tags on multimedia (images, video, audio, etc.)
  • PageViews
  • Unique Visitors
  • Bounce Rate
  • Page Authority

Track your content on the Internet, social networking sites, and contributions posted on other websites

Monitor the quality of your content as pertaining to topic, tone, consistency or compliance with your branding or marketing strategies

Assess and evaluate your content: keep, fix, improve, update, redirect, archive, remove, delete or trash

Use content analysis tools to get the job done if necessary (Excel, Content Analysis Tool, etc.)

Make an offline copy

If the job is too daunting, hire a Content Auditing Services Firm or a Content Audit Professional

The initial stages of the whole process can be time consuming and overwhelming but once you have a system in place that’s current and updated, you will be able to glean insight from all the information you’ve gathered and steer your website towards a richer, exceptional, more substantial, Google algorithm friendly content that will keep visitors coming back for more.

Lorem Ipsum Alternatives – Dummy Text You’ll Want To Read

Dummy placeholder text can be predictable and boring. The good news is that there are interesting and fun alternatives that can add spice to your demo themes and dummy content needy projects. Check out these Lorem Ipsum alternatives to fill up those empty spaces.

Not Lorem Ipsum

Not Lorem Ipsum is an ongoing project by one of 2nd Floor’s Directors, Chris Wharton, copywriter and web design industry professional for nearly 10 years together with Jude Wharton, 2nd Floor’s Copywriter and Business Director who came up with the name Not Lorem Ipsum. They have written sample text for over 40 industry sectors including accounting, advertising, education, food, consultancies, holidays and resorts, photography, web/graphic design, churches, startups, and so much more. Sample copy is written in British English.

Fillerati (choose an author)

Add a scholarly flair to your demos with Fillerati, a creation by MadScienceApp built with HTML5 and CSS2/CSS3, jQuery, and best viewed in browsers such as Chrome, Firefox, Safari or Opera. The source for the public domain filler text is provided by Project Gutenburg which includes extracts and excerpts from out-of-copyright books such as Around the World in 80 Days, The Wizard of Oz, Princess of Mars, Alice in Wonderland, The Scarlet Plague, Moby Dick, The War of the Worlds by authors L. Frank Baum, Edgar Rice Burroughs, Lewis Carroll, Jack London, Herman Melville, Jules Verne, and H.G. Wells.

Corporate Ipsum

Fill up those corporate pages with business sounding lingo that seemingly makes sense or maybe not. Corporate cliché and meaningless business jargon that will make your users think.

Chuck Norris Ipsum

Can’t get enough of those Chuck Norris jokes? Why not fill up your dummy placeholder text with loads of Chuck Norris facts? You can also mix it up with good old Lorem Ipsum copy just to break it up a bit and make it a bit more confusing, ehrm, interesting.

Picksum Ipsum

Not into Chuck Norris? How about some cool film heavyweights to fill your up those dead spaces? Bust those boring text fillers with some Eastwood, Freeman, Carrey, Caine famous quotable quotes from their most popular movies. Boredom begone.

Random Text

Random Text generator is every web dev’s friend when it comes to generating dummy text. It is a tool designers and developers can use to quickly grab dummy text in either Lorem Ipsum or Gibberish format. A number of features that make RandomText a little different from other Lorem Ipsum dummy text generators is that you can:

  • Grab HTML or just plain text – even save generated text as files: No need to waste time copying text and then more time marking it up in HTML manually, just hit View HTML Code and then Copy to Clipboard
  • Use the address bar to create a query: RandomText allows you to get at your text quicker by using the URL to construct a query.
  • Integrate into your CMS using our API: just use the RandomText API to return generated content in JSON format.

Blind Text Generator

For design control freaks, this useful tool provides Lorem Ipsum and a number of alternatives for any type of layout need. You can control the number of characters, words, and paragraphs you want plus you can set your font choice and preview how text will be displayed in your design.

Duck Island’s Greek Machine

Duck Island Greek Machine lets you pick from several languages to fit your website needs. Choose from: story telling styles like Dick and Jane, Fairy Tale and Hillbilly to other lifestyle, technical, business styles like Techno Babble, Marketing, Metropolitan & Pseudo German. You also get your good old Classic Latin.

HTML-Ipsum

If you are geek-speak certified then this dummy text generator will definitely appeal to you. You can copy everything already in HTML format including the kitchen sink. Check this one out.

What’s your favorite? Leave us a comment and let us know.

Understanding 401, 301 and 302 Redirects and How It Affects Your SEO

Google Panda now includes improving user experience as one of the key factors in attaining a high website quality score. This means that website owners now need to conduct regular site wide audits to see if their website contains any broken or dead links that could affect user feedback. Broken or dead links frustrate and annoy users and if this happens often enough on your website, these users will leave, resulting in a higher bounce rate on your site. Links that lead to nowhere are one of the most common complaints on the Internet. Not good for user experience and definitely bad for SEO.

To redirect is to direct someone to a different location or by a different route. Your web server returns several error messages when encountering a problem such as broken urls, inactive web pages, new website, new web page, or probably site under construction. When this happens, users get redirected knowing or unknowingly.

Here are the most common ones you need to pay attention to:

The 301 Redirect

301 Redirect, also known as a permanent redirect, means you are permanently moving content previously existing on a page or an entire site, including all the attributes, qualities, links, PageRank, Page Authority, and SEO juice that belong to it, to a new url of your choice. It is the most efficient and most SEO friendly way of redirecting your traffic after a change in permalinks. 301 redirect maintains your search engine rank and re-indexes your pages, posts and everything else on the basis of your new permalinks.

The 302 Redirect

302 Redirect, also known as a temporary redirect, means you are temporarily moving content previously existing on a page or an entire site, to a temporary location. This also means that you may bring back the old url in the future. This type of redirect does not transfer any of the SEO juice and value of the original page. 301 Redirect is often used specifically when testing a new page for client feedback or when your site or page is undergoing maintenance.

The 404 Error Page

404 Redirect occurs when a customer on your site tries to access a pagename that doesn’t exist. These are dead pages that link nowhere and gives users a bad experience. If these pages remain unfixed, Google will de-index these pages and all the valuable links, rank, SEO juice, and authority attributed to these pages will be wasted. 404 Error pages that are not redirected will annoy users and make them leave your site immediately. You can, however, always add 301 redirect it to homepage, to take advantage of link juice or even create a custom 404 page to redirect them to another page you like.

Errors are unavoidable and links do get broken that is why it is always a good practice to do site maintenance regularly and check and double check all your links on your website to see if they are active.

Header.php and The WordPress Header


In a previous article, we ‘deconstructed’ and brokedown a basic WordPress theme into 5 sections namely: the header, the menu, the sidebar, the content, and the footer. This time we are going to dive a little deeper into one of the sections and try to dissect it a little bit more.

Here’s how we defined The WordPress Header in that article:

The header is the structure that traditionally sits at the top of a web page. It contains the title of the website. It may also be referred to as the masthead, head, title, and banner. In all WordPress Themes, the header is found within the header.php template file.

Most themes have a header image that displays at the top of the page. This image is generated by a graphic defined either in the CSS value for the property that represents the header area or through the use of a custom header feature in WordPress. In themes that don’t have the custom header image feature, you can easily define a background image for the header image using CSS. (source: CSS for Dummies)

Not to be confused with headings (more on this in the future), the WordPress header is an important and strategic element of any WordPress theme because it is the first thing the visitor sees on your site. A good header communicates and reflects the content, purpose and intention of the site. It establishes your personal brand. Much like the cover of a top selling book or magazine, the header serves as a teaser of what can be expected from the rest of the website. It should be interesting enough to encourage visitors to explore the site even further. Not all headers require pictures or images. Some websites use beautiful typography as headers and they work just as well. Cluttered headers crammed with outdated blinking gifs and ads should be avoided as they are surefire ways for visitors to hit the back button in a jiffy.

The header.php file

header.php should contain everything from the DOCTYPE tag to the end of the page’s navigation. This means that all <head> tag information, meta tags, <title> tag variables, and other information must be included in the site’s header. This template file also must contain the <?php wp_head(); ?> tag, which places valuable WordPress version-sharing information, and other website information, within the head of the document. It must be placed before the closing </head> tag. (source: speckyboy.com)

The coding experiment

The header is set in an h1 HTML tag and features one template tag used with two different options or parameters. Basically, the first one displays the URL of the website in a link, and the second one displays the name of the blog or website as set in the Administration > Settings > General panel. When the user moves the mouse over the header title, the header can be clicked to return back to the main or front page of the site as set in the Administration > Settings > General panel.

Let’s experiment a bit with this basic header code. The code below contains two sections (the head and the body)

<HTML>

<HEAD>
<TITLE>My Home Page</TITLE>
</HEAD>

<BODY>
<H1>Blogging Experiment</H1>
This is an experiment.
</BODY>

</HTML>

and it will produce something like this:

Blogging Experiment

This is an experiment.

Of course, this is just plain simple html without any CSS styling applied yet. Sample CSS code that can be applied:

#header {
background: #90a090;
border-bottom: double 3px #aba;
border-left: solid 1px #9a9;
border-right: solid 1px #565;
border-top: solid 1px #9a9;
font: italic normal 230% ‘Times New Roman’, Times, serif;
letter-spacing: 0.2em;
margin: 0;
padding: 15px 10px 15px 60px;
}

If you want to experiment a little further and test your html coding skills you can check out this nifty tool on the W3Schools website. Simply submit your code and see what happens. You can make it as simple or as complicated as you want. Check it out here: W3Schools.com Try it yourself.